<template>
    <view class="components-CarProItem-CarProItem">
        <view class="left">
            <view class="pic">
                <image class="img" src="/static/logo.png" mode="aspectFill"></image>
            </view>
            <view class="text">
                <view class="title">
                    产品标题产品标题产品标题
                </view>
                <view class="sku">微辣/10包</view>
                <view class="price">
                    <view class="big">¥10.5</view>
                    <view class="small">¥22.3</view>
                </view>
            </view>
        </view>
        <view class="right">
            <u-number-box v-model="value" min="0" max="99">
                <view
                    slot="minus"
                    class="minus numbtn"
                    :class="value <=0 ? 'none' :''"
                >
                    <u-icon
                        name="minus"
                        size="12"
                        color="#ccc"
                    ></u-icon>
                </view>
                <text
                    slot="input"
                    class="input"
                >{{ value }}
                </text>
                <view
                    slot="plus"
                    class="plus numbtn"
                >
                    <u-icon
                        name="plus"
                        color="#FFFFFF"
                        size="12"
                    ></u-icon>
                </view>
            </u-number-box>
        </view>
    </view>
</template>

<script  lang="js">
import UNumberBox from "../../uni_modules/uview-ui/components/u-number-box/u-number-box.vue";
import UIcon from "../../uni_modules/uview-ui/components/u-icon/u-icon.vue";

export default {
    name: "CarProItem",
    components: {UIcon, UNumberBox},
    data() {
        return {
            value: 0,
        };
    },
    methods: {
        numChange(e) {
            console.log(e)
        }
    }
}
</script>

<style lang="scss">
.components-CarProItem-CarProItem {
    padding: 20rpx 0;
    border-bottom: 1px solid $border-color-light;
    position: relative;
    .left {
        width: 500rpx;
        @include flex-box();

        .pic {
            width: 110rpx;
            height: 110rpx;

            .img {
                width: 100%;
                height: 100%;
            }
        }

        .text {
            flex: 1;
            padding-left: 20rpx;
            .title {

            }
        }
    }
    .right {
        position: absolute;
        right: 0;
        bottom: 0;

        .skuSelect {
            height: 40rpx;
            padding: 0 10rpx;
            background-color: $brand-theme-color;
            font-size: 28rpx;
            color: #fff;
        }
        .numbtn {
            width: 40rpx;
            height: 40rpx;
            @include flex-box-set();
        }
        .minus {
            border: 1px solid #ccc;
        }
        .plus {
            background-color: $brand-theme-color;
        }
        .input {
            width: 60rpx;
            height: 40rpx;
            font-size: 26rpx;
            color: #888;
            @include flex-box-set();
        }
        .none {
            display: none;
        }
    }
}
</style>